<template>
  <q-dialog
    v-model="visible"
    persistent
    maximized
    transition-show="slide-up"
    transition-hide="slide-down"
    @before-hide="beforeHideListener"
  >
    <q-card class="bg-primary row justify-center items-center content-center">
      <q-bar
        class="full-width justify-end bg-transparent"
        style="height: 50px; line-height: 50px"
      >
        <q-btn
          round
          flat
          color="negative"
          icon="close"
          size="20px"
          v-close-popup
        />
      </q-bar>
      <q-card-section
        class="row justify-center items-center content-center"
        style="height: calc(100vh - 50px)"
      >
        <q-card-section class="justify-center">
          <slot name="main">
            <q-spinner-box size="20rem" color="white" />
          </slot>
        </q-card-section>
        <q-card-section
          style="width: 25rem"
          class="justify-center row q-gutter-lg"
        >
          <div class="text-h2 text-bold text-center text-white">
            <template v-if="needGate">{{ $t(lang + "闸门等待") }}</template>
            <template v-else-if="!status.centerConnected">{{
              $t(lang + "等待重连")
            }}</template>
            <template v-else>{{ $t(lang + "机器人暂停") }}</template>
          </div>
          <div
            class="text-white text-bold text-h5 q-pa-md text-center"
            style="
              background: transparent;
              border-radius: 1rem;
              backdrop-filter: blur(10px) brightness(50%);
            "
          >
            <div
              v-if="
                needGate && firstCmd.content !== null && firstCmd.content !== ''
              "
            >
              {{ $t(lang + "闸门打开后机器人会继续前进") }}
            </div>
            <div v-else-if="!status.centerConnected">
              {{ $t(lang + "机器人当前未连接到中控恢复连接后会自动运行") }}
            </div>
            <div v-else>{{ $t(lang + "机器人当前处于暂停模式") }}</div>
          </div>
          <q-btn
            color="negative"
            class="text-bold"
            size="xl"
            icon="stop"
            :label="$t(lang + '中止')"
            @click="clear"
          />
          <q-btn
            color="white"
            v-if="
              status.centerConnected &&
              (!needGate || firstCmd.content == null || firstCmd.content === '')
            "
            class="text-bold"
            size="xl"
            outline
            icon="play_arrow"
            :label="$t(lang + '继续运行')"
            @click="resume"
          />
        </q-card-section>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref, computed, watch, onUnmounted } from "vue";
import { api } from "boot/axios.js";
import { useAPIStore } from "stores/api";
import { status } from "src/utils/deviceWs";

const lang = "indexPage.devicePause.";
const visible = ref(false);
const firstCmd = ref({
  type: "",
  content: null,
});

// 是否需要开门
const needGate = computed(
  () =>
    firstCmd.value.type !== undefined &&
    ["gate-open", "gate-close", "await"].includes(firstCmd.value.type)
);

function getFirstCmd() {
  console.log("获取第一条指令");
  if (timer) clearTimeout(timer);

  api.get(useAPIStore().amrUrl + "amr/cmd/first").then((rs) => {
    firstCmd.value = rs.data;
    timer = setTimeout(getFirstCmd, 1000);
  });
}

let timer;
watch(visible, (value) => {
  console.log("----暂停", value);
  if (value) {
    // timer = setInterval(getFirstCmd, 1000)
    timer = setTimeout(getFirstCmd, 1000);
  } else {
    if (timer) clearTimeout(timer);
  }
});

/**
 * 隐藏前
 */
function beforeHideListener() {
  console.log("隐藏", timer);
  if (timer) clearTimeout(timer);
}

onUnmounted(() => {
  console.log("onUnmounted");
  if (timer) clearTimeout(timer);
});
function resume() {
  if (needGate.value) {
    api.get(useAPIStore().amrUrl + "amr/resume/gate", {
      params: firstCmd.value,
    });
  } else {
    api.get(useAPIStore().amrUrl + "amr/resume");
  }
}
function clear() {
  api.get(useAPIStore().amrUrl + "amr/clear");
  api.get(useAPIStore().amrUrl + "amr/resume");
}
defineExpose({ visible });
</script>
